<template>
  <div class="history">
    <slot name="icon"></slot>

    <div class="h-content">
      <div class="keyword" @click="searchByClick">{{ kw }}</div>

      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: ["kw"],

  data() {
    return {};
  },
  created() {},

  components: {},

  computed: {},

  methods: {
    searchByClick(e) {
      this.$emit("searchByClick", e.target.textContent);
    },

    // delHis(e) {
    //     this.$emit('delHis', e.target.previousSibling.textContent)
    // }
  },
};
</script>
<style lang='scss' scoped>
$grey: #ebecec;

.history {
  display: flex;
  align-items: center;
  height: 45px;

  .h-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    height: 100%;
    padding-right: 20px;
    border-bottom: 1px solid $grey;
    font-size: 14px;
    color: #333;

    .keyword {
      width: 280px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .btn-del {
      width: 12px;
      height: 12px;
      background: url("../../images/btn-del.svg") no-repeat;
      background-size: contain;
    }
  }
}
</style>